<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多人五子棋 - 多人在线棋类游戏</title>
    <meta name="description" content="支持1-5人同时游戏的在线五子棋，精美界面，流畅体验！">
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @keyframes fall {
            0% {
                transform: translateY(-100vh) rotate(0deg);
                opacity: 1;
            }
            100% {
                transform: translateY(100vh) rotate(360deg);
                opacity: 0;
            }
        }
        
        @keyframes pulse-glow {
            0%, 100% {
                box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
            }
            50% {
                box-shadow: 0 0 30px rgba(0, 212, 255, 0.6);
            }
        }
        
        .pulse-glow {
            animation: pulse-glow 2s infinite;
        }
        
        html {
            scroll-behavior: smooth;
        }
        
        ::-webkit-scrollbar {
            width: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: #1a1a2e;
        }
        
        ::-webkit-scrollbar-thumb {
            background: #00d4ff;
            border-radius: 4px;
        }

        body {
            font-family: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
        }
    </style>
</head>
<body>
    <div id="root"></div>
    
    <script type="text/babel">
        const { useState, useCallback, useEffect } = React;

        const BOARD_SIZE = 15;
        const EMPTY = 0;
        const PLAYER_1 = 1;
        const PLAYER_2 = 2;
        const PLAYER_3 = 3;
        const PLAYER_4 = 4;
        const PLAYER_5 = 5;

        const ALL_PLAYERS = [PLAYER_1, PLAYER_2, PLAYER_3, PLAYER_4, PLAYER_5];

        const Confetti = () => {
            return (
                <div className="fixed inset-0 pointer-events-none z-50">
                    {[...Array(50)].map((_, i) => (
                        <div
                            key={i}
                            className="absolute w-2 h-2 opacity-80"
                            style={{
                                left: `${Math.random() * 100}%`,
                                backgroundColor: ['#fbbf24', '#f59e0b', '#06b6d4', '#8b5cf6', '#ec4899'][Math.floor(Math.random() * 5)],
                                animation: `fall ${2 + Math.random() * 3}s linear infinite`,
                                animationDelay: `${Math.random() * 2}s`
                            }}
                        />
                    ))}
                </div>
            );
        };

        const GomokuGame = () => {
            const [gameStarted, setGameStarted] = useState(false);
            const [numPlayers, setNumPlayers] = useState(2);
            const [activePlayers, setActivePlayers] = useState([]);
            const [board, setBoard] = useState(() => 
                Array(BOARD_SIZE).fill(null).map(() => Array(BOARD_SIZE).fill(EMPTY))
            );
            const [currentPlayerIndex, setCurrentPlayerIndex] = useState(0);
            const [winner, setWinner] = useState(null);
            const [winningLine, setWinningLine] = useState([]);
            const [showConfetti, setShowConfetti] = useState(false);
            const [scores, setScores] = useState({
                [PLAYER_1]: 0,
                [PLAYER_2]: 0,
                [PLAYER_3]: 0,
                [PLAYER_4]: 0,
                [PLAYER_5]: 0
            });

            const currentPlayer = activePlayers[currentPlayerIndex];

            useEffect(() => {
                setActivePlayers(ALL_PLAYERS.slice(0, numPlayers));
            }, [numPlayers]);

            const checkWin = useCallback((board, row, col, player) => {
                const directions = [
                    [0, 1],   // 水平
                    [1, 0],   // 垂直
                    [1, 1],   // 对角线1
                    [1, -1]   // 对角线2
                ];

                for (let [dx, dy] of directions) {
                    let count = 1;
                    let line = [[row, col]];
                    
                    for (let i = 1; i < 5; i++) {
                        const newRow = row + dx * i;
                        const newCol = col + dy * i;
                        if (newRow >= 0 && newRow < BOARD_SIZE && 
                            newCol >= 0 && newCol < BOARD_SIZE && 
                            board[newRow][newCol] === player) {
                            count++;
                            line.push([newRow, newCol]);
                        } else {
                            break;
                        }
                    }
                    
                    for (let i = 1; i < 5; i++) {
                        const newRow = row - dx * i;
                        const newCol = col - dy * i;
                        if (newRow >= 0 && newRow < BOARD_SIZE && 
                            newCol >= 0 && newCol < BOARD_SIZE && 
                            board[newRow][newCol] === player) {
                            count++;
                            line.unshift([newRow, newCol]);
                        } else {
                            break;
                        }
                    }
                    
                    if (count >= 5) {
                        return line.slice(0, 5);
                    }
                }
                return null;
            }, []);

            const handleCellClick = useCallback((row, col) => {
                if (board[row][col] !== EMPTY || winner) return;

                const newBoard = board.map(row => [...row]);
                newBoard[row][col] = currentPlayer;
                
                const winLine = checkWin(newBoard, row, col, currentPlayer);
                if (winLine) {
                    setWinner(currentPlayer);
                    setWinningLine(winLine);
                    setScores(prev => ({
                        ...prev,
                        [currentPlayer]: prev[currentPlayer] + 1
                    }));
                    setShowConfetti(true);
                }
                
                setBoard(newBoard);
                setCurrentPlayerIndex((currentPlayerIndex + 1) % activePlayers.length);
            }, [board, currentPlayer, currentPlayerIndex, winner, checkWin, activePlayers.length]);

            const startGame = () => {
                setActivePlayers(ALL_PLAYERS.slice(0, numPlayers));
                setGameStarted(true);
                resetGame();
            };

            const backToSetup = () => {
                setGameStarted(false);
                resetGame();
            };

            const resetGame = () => {
                setBoard(Array(BOARD_SIZE).fill(null).map(() => Array(BOARD_SIZE).fill(EMPTY)));
                setCurrentPlayerIndex(0);
                setWinner(null);
                setWinningLine([]);
                setShowConfetti(false);
            };

            const resetScores = () => {
                setScores({
                    [PLAYER_1]: 0,
                    [PLAYER_2]: 0,
                    [PLAYER_3]: 0,
                    [PLAYER_4]: 0,
                    [PLAYER_5]: 0
                });
            };

            useEffect(() => {
                if (showConfetti) {
                    const timer = setTimeout(() => setShowConfetti(false), 3000);
                    return () => clearTimeout(timer);
                }
            }, [showConfetti]);

            const getPlayerInfo = (player) => {
                const playerData = {
                    [PLAYER_1]: { name: '玩家一', color: '黑子', bgClass: 'bg-black', textClass: 'text-white', borderClass: 'border-gray-600' },
                    [PLAYER_2]: { name: '玩家二', color: '白子', bgClass: 'bg-white', textClass: 'text-gray-800', borderClass: 'border-gray-400' },
                    [PLAYER_3]: { name: '玩家三', color: '红子', bgClass: 'bg-red-600', textClass: 'text-white', borderClass: 'border-red-400' },
                    [PLAYER_4]: { name: '玩家四', color: '蓝子', bgClass: 'bg-blue-600', textClass: 'text-white', borderClass: 'border-blue-400' },
                    [PLAYER_5]: { name: '玩家五', color: '绿子', bgClass: 'bg-green-600', textClass: 'text-white', borderClass: 'border-green-400' }
                };
                return playerData[player];
            };

            const getPieceStyle = (row, col) => {
                const piece = board[row][col];
                const isWinning = winningLine.some(([r, c]) => r === row && c === col);
                
                if (piece === EMPTY) return '';
                
                const playerInfo = getPlayerInfo(piece);
                const baseStyle = `${playerInfo.bgClass} border-2 ${playerInfo.borderClass}`;
                const winStyle = isWinning ? 'ring-4 ring-yellow-400 shadow-lg shadow-yellow-400/50 animate-pulse' : '';
                const shadowStyle = 'shadow-md';
                
                return `${baseStyle} ${winStyle} ${shadowStyle} w-5 h-5 md:w-6 md:h-6 lg:w-7 lg:h-7 rounded-full transition-all duration-300 aspect-square flex items-center justify-center flex-shrink-0`;
            };

            const scrollToInfo = () => {
                document.getElementById('game-info').scrollIntoView({ behavior: 'smooth' });
            };

            if (!gameStarted) {
                return (
                    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-blue-900 to-purple-900 p-4 flex items-center justify-center">
                        <div className="bg-gray-800/90 backdrop-blur-sm rounded-2xl shadow-2xl border border-cyan-500/30 p-8 lg:p-12 max-w-4xl w-full">
                            <h1 className="text-4xl lg:text-6xl font-bold text-center mb-8 lg:mb-12 bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text text-transparent">
                                多人五子棋
                            </h1>
                            
                            <div className="grid lg:grid-cols-2 gap-8 items-center">
                                <div className="text-center">
                                    <h2 className="text-xl lg:text-2xl font-semibold text-gray-300 mb-6">选择玩家人数</h2>
                                    
                                    <div className="flex justify-center space-x-3 lg:space-x-4 mb-8">
                                        {[1, 2, 3, 4, 5].map(num => (
                                            <button
                                                key={num}
                                                onClick={() => setNumPlayers(num)}
                                                className={`w-12 h-12 lg:w-16 lg:h-16 rounded-xl font-bold text-lg lg:text-xl border-2 transition-all duration-200 ${
                                                    numPlayers === num 
                                                        ? 'bg-cyan-600 text-white border-cyan-400 shadow-lg shadow-cyan-500/50 scale-110' 
                                                        : 'bg-gray-700 text-gray-300 border-gray-600 hover:bg-gray-600 hover:scale-105'
                                                }`}
                                            >
                                                {num}
                                            </button>
                                        ))}
                                    </div>

                                    <button
                                        onClick={startGame}
                                        className="px-8 lg:px-12 py-3 lg:py-4 bg-gradient-to-r from-cyan-600 to-blue-600 text-white font-bold text-lg lg:text-xl rounded-lg hover:from-cyan-500 hover:to-blue-500 transition-all duration-200 shadow-lg shadow-cyan-500/25 border border-cyan-400/30 hover:shadow-xl hover:shadow-cyan-500/40 transform hover:scale-105"
                                    >
                                        开始游戏
                                    </button>
                                </div>

                                <div className="space-y-6">
                                    <div className="bg-gray-700/50 rounded-xl p-6 border border-cyan-500/20">
                                        <h3 className="text-lg font-semibold text-gray-300 mb-4 text-center">
                                            {numPlayers === 1 ? '单人练习模式' : `${numPlayers}人对战`}
                                        </h3>
                                        <div className="flex flex-wrap justify-center gap-4">
                                            {ALL_PLAYERS.slice(0, numPlayers).map(player => {
                                                const playerInfo = getPlayerInfo(player);
                                                return (
                                                    <div key={player} className="text-center">
                                                        <div className={`${playerInfo.bgClass} w-10 h-10 rounded-full border-2 ${playerInfo.borderClass} shadow-md mb-2 mx-auto aspect-square flex items-center justify-center flex-shrink-0`}></div>
                                                        <div className="text-xs text-gray-400 font-medium">{playerInfo.color}</div>
                                                    </div>
                                                );
                                            })}
                                        </div>
                                    </div>

                                    <div className="bg-gray-700/50 rounded-xl p-6 border border-cyan-500/20">
                                        <h3 className="text-lg font-semibold text-cyan-400 mb-3 text-center">快速入门</h3>
                                        <div className="text-sm text-gray-300 text-center">
                                            <p>率先连成5子者获胜！</p>
                                            <p className="text-xs text-gray-400 mt-2">详细规则请在游戏中查看</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                );
            }

            return (
                <div className="min-h-screen bg-gradient-to-br from-gray-900 via-blue-900 to-purple-900">
                    {showConfetti && <Confetti />}
                    
                    <div className="min-h-screen flex flex-col justify-center items-center p-4">
                        <div className="text-center mb-4">
                            <h1 className="text-2xl md:text-3xl lg:text-4xl font-bold mb-2 bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text text-transparent">
                                多人五子棋
                            </h1>
                            
                            {winner ? (
                                <div className="text-xl md:text-2xl font-bold bg-gradient-to-r from-yellow-400 to-orange-500 bg-clip-text text-transparent animate-bounce">
                                    🎉 {getPlayerInfo(winner).color}获胜！ 🎉
                                </div>
                            ) : (
                                <div className="flex items-center justify-center space-x-3">
                                    <div className={`${getPlayerInfo(currentPlayer).bgClass} w-6 h-6 md:w-8 md:h-8 rounded-full border-2 ${getPlayerInfo(currentPlayer).borderClass} pulse-glow aspect-square flex items-center justify-center flex-shrink-0`}></div>
                                    <span className="text-lg md:text-xl font-semibold text-cyan-400">
                                        {numPlayers === 1 ? '轮到你了' : `${getPlayerInfo(currentPlayer).color}的回合`}
                                    </span>
                                </div>
                            )}
                        </div>

                        <div className="flex justify-center mb-6">
                            <div className="bg-amber-200 p-2 md:p-3 lg:p-4 rounded-lg shadow-2xl border-4 border-amber-800">
                                <div 
                                    className="bg-amber-600 p-1 md:p-2 rounded grid gap-px"
                                    style={{
                                        gridTemplateColumns: 'repeat(15, 1fr)',
                                        gridTemplateRows: 'repeat(15, 1fr)',
                                    }}
                                >
                                    {board.map((row, rowIndex) =>
                                        row.map((cell, colIndex) => (
                                            <div
                                                key={`${rowIndex}-${colIndex}`}
                                                className="w-5 h-5 md:w-6 md:h-6 lg:w-8 lg:h-8 xl:w-9 xl:h-9 border border-amber-800 flex items-center justify-center cursor-pointer hover:bg-amber-500 hover:bg-opacity-40 transition-all duration-200 bg-amber-200 hover:scale-110"
                                                onClick={() => handleCellClick(rowIndex, colIndex)}
                                            >
                                                {cell !== EMPTY && (
                                                    <div className={getPieceStyle(rowIndex, colIndex)} />
                                                )}
                                            </div>
                                        ))
                                    )}
                                </div>
                            </div>
                        </div>

                        <div className="flex flex-wrap justify-center gap-3 mb-4">
                            <button
                                onClick={resetGame}
                                className="px-6 py-2 bg-gradient-to-r from-cyan-600 to-blue-600 text-white font-bold rounded-lg hover:from-cyan-500 hover:to-blue-500 transition-all duration-200 shadow-lg border border-cyan-400/30 transform hover:scale-105"
                            >
                                新游戏
                            </button>
                            <button
                                onClick={backToSetup}
                                className="px-6 py-2 bg-gradient-to-r from-gray-600 to-gray-700 text-white font-bold rounded-lg hover:from-gray-500 hover:to-gray-600 transition-all duration-200 shadow-lg transform hover:scale-105"
                            >
                                设置
                            </button>
                        </div>

                        <div className="text-center">
                            <button 
                                onClick={scrollToInfo}
                                className="text-cyan-400 hover:text-cyan-300 transition-colors duration-200 group"
                            >
                                <div className="text-sm mb-1">分数和信息</div>
                                <div className="text-2xl animate-bounce group-hover:scale-110 transition-transform">↓</div>
                            </button>
                        </div>
                    </div>

                    <div id="game-info" className="bg-gray-900/80 backdrop-blur-sm border-t border-cyan-500/30">
                        <div className="max-w-6xl mx-auto p-6 space-y-8">
                            
                            <div className="text-center">
                                <h2 className="text-2xl font-bold text-cyan-400 mb-4">游戏信息</h2>
                                
                                {numPlayers > 1 && (
                                    <div className="bg-gray-800/60 rounded-xl p-4 mb-6 inline-block">
                                        <div className="text-gray-300 mb-3 font-semibold">回合顺序</div>
                                        <div className="flex justify-center space-x-3">
                                            {activePlayers.map((player, index) => {
                                                const playerInfo = getPlayerInfo(player);
                                                const isCurrent = index === currentPlayerIndex;
                                                return (
                                                    <div
                                                        key={player}
                                                        className={`${playerInfo.bgClass} w-10 h-10 rounded-full border-2 ${playerInfo.borderClass} flex items-center justify-center text-sm font-bold ${
                                                            isCurrent ? 'ring-4 ring-yellow-400 animate-pulse scale-110' : 'opacity-60'
                                                        } transition-all duration-300 aspect-square flex-shrink-0`}
                                                    >
                                                        {index + 1}
                                                    </div>
                                                );
                                            })}
                                        </div>
                                    </div>
                                )}
                            </div>

                            <div className="bg-gray-800/60 rounded-xl p-6">
                                <h3 className="text-xl font-bold text-center mb-6 text-cyan-400">计分板</h3>
                                <div className="flex flex-wrap justify-center gap-6 max-w-4xl mx-auto">
                                    {activePlayers.map(player => {
                                        const playerInfo = getPlayerInfo(player);
                                        const isCurrent = player === currentPlayer;
                                        const isLeading = scores[player] === Math.max(...Object.values(scores));
                                        
                                        return (
                                            <div key={player} className={`bg-gray-700/80 rounded-lg p-6 text-center border-2 transition-all duration-300 min-w-32 ${
                                                isCurrent 
                                                    ? 'border-cyan-400 shadow-lg shadow-cyan-400/30 scale-105' 
                                                    : isLeading && scores[player] > 0
                                                        ? 'border-yellow-400 shadow-lg shadow-yellow-400/20'
                                                        : 'border-gray-600'
                                            }`}>
                                                <div className={`${playerInfo.bgClass} w-14 h-14 rounded-full border-2 ${playerInfo.borderClass} mx-auto mb-3 aspect-square flex items-center justify-center flex-shrink-0`}></div>
                                                <div className="text-sm font-medium text-gray-300 mb-2">{playerInfo.color}</div>
                                                <div className={`text-3xl font-bold ${playerInfo.bgClass} ${playerInfo.textClass} rounded-lg px-4 py-2 border ${playerInfo.borderClass} inline-block`}>
                                                    {scores[player]}
                                                </div>
                                                {isLeading && scores[player] > 0 && (
                                                    <div className="text-sm text-yellow-400 mt-2 font-semibold">👑 领先</div>
                                                )}
                                                {isCurrent && !winner && (
                                                    <div className="text-sm text-cyan-400 mt-2 font-semibold">⭐ 进行中</div>
                                                )}
                                            </div>
                                        );
                                    })}
                                </div>
                                
                                <div className="flex justify-center space-x-4 mt-8">
                                    <button
                                        onClick={resetScores}
                                        className="px-6 py-3 bg-gradient-to-r from-red-600 to-red-700 text-white font-semibold rounded-lg hover:from-red-500 hover:to-red-600 transition-all duration-200 shadow-md transform hover:scale-105"
                                    >
                                        清零分数
                                    </button>
                                </div>
                            </div>

                            <div className="grid md:grid-cols-2 gap-6">
                                <div className="bg-gray-800/60 rounded-xl p-6">
                                    <h3 className="text-xl font-bold text-cyan-400 mb-4">游戏规则</h3>
                                    <div className="text-gray-300 space-y-3">
                                        <p>• 玩家轮流在空白交叉点放置棋子</p>
                                        <p>• 率先连成5子（任意方向）的玩家获胜</p>
                                        <p>• 有效连线：横向、纵向或斜向</p>
                                        <p>• 获胜者得1分并触发庆祝动画</p>
                                        {numPlayers === 1 && <p className="text-yellow-400">• 单人模式：练习策略的完美选择！</p>}
                                    </div>
                                </div>

                                <div className="bg-gray-800/60 rounded-xl p-6">
                                    <h3 className="text-xl font-bold text-cyan-400 mb-4">游戏统计</h3>
                                    <div className="text-gray-300 space-y-3">
                                        <div className="flex justify-between">
                                            <span>总游戏局数：</span>
                                            <span className="font-bold text-cyan-400">{Object.values(scores).reduce((a, b) => a + b, 0)}</span>
                                        </div>
                                        <div className="flex justify-between">
                                            <span>当前回合：</span>
                                            <span className="font-bold text-cyan-400">{Object.values(scores).reduce((a, b) => a + b, 0) + 1}</span>
                                        </div>
                                        {numPlayers > 1 && (
                                            <>
                                                <div className="flex justify-between">
                                                    <span>领先玩家：</span>
                                                    <span className="font-bold text-yellow-400">
                                                        {Object.values(scores).every(score => score === 0) 
                                                            ? '暂无' 
                                                            : getPlayerInfo(Object.entries(scores).reduce((a, b) => scores[a[0]] > scores[b[0]] ? a : b)[0]).color
                                                        }
                                                    </span>
                                                </div>
                                                <div className="flex justify-between">
                                                    <span>最高分数：</span>
                                                    <span className="font-bold text-yellow-400">{Math.max(...Object.values(scores))}</span>
                                                </div>
                                            </>
                                        )}
                                    </div>
                                </div>
                            </div>

                            <div className="text-center py-4">
                                <button 
                                    onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
                                    className="text-cyan-400 hover:text-cyan-300 transition-colors duration-200 group"
                                >
                                    <div className="text-2xl animate-bounce group-hover:scale-110 transition-transform">↑</div>
                                    <div className="text-sm">返回游戏</div>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            );
        };

        ReactDOM.render(<GomokuGame />, document.getElementById('root'));
    </script>
</body>
</html>